<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8.2.1-HTML Attributes 与 DOM Properties</title>
</head>

<body>
    <div id="foo">
        <input aria-valuenow="75" value="foo" id="my-input" type="text" value="foo" class="foo" onchange="change()" />
    </div>
</body>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>
        /**
         * HTML Attributes 的作用是设置与之对应的 DOM Properties 的初始值。
         * 
         * 理解 HTML Attributes 和 DOM Properties 之间的差异和关联非常重要
         * - 能够帮助我们合理地设计虚拟节点的结构，更是正确地为元素设置属性的关键
         * 
         * 1. HTML Attributes 指的就是定义在 HTML 标签上的属性，
         *     这里指的就是id="my-input"、type="text" 和 value="foo"
         * 
         * 2. 可以通过JavaScript 代码来读取该 DOM 对象
         *     这些属性就是所谓的 DOM Properties
         * 
         * 3. 很多 HTML Attributes 在 DOM 对象上有与之同名的 DOM Properties，
         *     例如 id="my-input" 对应 el.id，type="text" 对应 el.type，value="foo" 对应 el.value 等
         * 
         * 4. DOM Properties 与 HTML Attributes 的名字不总是一模一样的
         *     class="foo" 对应的 DOM Properties 则是 el.className
         * 
         * 5. 并不是所有 HTML Attributes 都有与之对应的 DOM Properties
         *     aria-* 类的 HTML Attributes 就没有与之对应的 DOM Properties
         * 
         * 6. 不是所有 DOM Properties 都有与之对应的 HTML Attributes
         *     可以用 el.textContent 来设置元素的文本内容，但并没有与之对应的 HTML Attributes 来完成同样的工作
         * 
         * 7. HTML Attributes 的值与 DOM Properties 的值之间是有关联的
         *    - 一个具有 id 属性的 div 标签。其中，id="foo" 对应的 DOM Properties 是 el.id，并且值为字符串 'foo'
         *    - 把这种 HTML Attributes 与 DOM Properties 具有相同名称（即 id）的属性看作直接映射
         * 
         * 8. 并不是所有 HTML Attributes 与 DOM Properties 之间都是直接映射的关系
         *    - 具有 value 属性的 input 标签
         *    - 用户没有修改文本框的内容，那么通过 el.value 读取对应的 DOM Properties 的值就是字符串 'foo'。
         *    - 如果用户修改了文本框的值，那么 el.value 的值就是当前文本框的值
         *    - 用户对文本框内容的修改并不会影响 el.getAttribute('value') 的返回值，这个现象蕴含着 HTML Attributes 所代表的意义
         * 
         * 9. 一个 HTML Attributes 可能关联多个 DOM Properties
         *    - HTML Attributes 的作用是设置与之对应的 DOM Properties 的初始值
         *    - 一旦值改变，那么 DOM Properties 始终存储着当前值，而通过 getAttribute 函数得到的仍然是初始值
         *    - 仍然可以通过 el.defaultValue 来访问初始值
         *    - 如果你通过 HTML Attributes 提供的默认值不合法，
         *       那么浏览器会使用内建的合法值作为对应 DOM Properties 的默认值
         * */ 
        
        const el = document.querySelector('#my-input')
        console.log(el.value) // 'foo'

        function change(e) {
            // “奇怪”的现象：
            console.log(el.getAttribute('value')) // 仍然是 'foo'
            console.log(el.value) // 'bar'
            console.log(el.defaultValue) // 'foo'
        }

    </script>
    

</html>